import React, { Component } from 'react';
import {Link,NavLink} from 'react-router-dom'
class Tabbar extends Component {

    state = {
        tabbar: [
            {   
                href:'/index/home',
                icon: 'icon-shouye',
                text: '店铺'
            },
            {
                href:'/index/cate',
                icon: 'icon-fenlei',
                text: '分类'
            },
            {
                href:'/index/goods',
                icon: 'icon-quanbu',
                text: '所有商品'
            },
            {
                href:'/index/shopcart',
                icon: 'icon-gouwuche',
                text: '购物车'
            },
            {
                href:'/index/mine',
                icon: 'icon-wode',
                text: '个人中心'
            }
        ],
        currentIndex: 0
    }
    //定义组件的成员方法,在调用该方法的位置必须用 this.handleClick()
    handleClick(index) {
        //更新组件状态,同时触发组件更新
        this.setState({
            currentIndex: index
        });
    }

    render() {
        return (
            <div className="tabbar">
                {
                    this.state.tabbar.map((item, index) => {
                        return (
                            <NavLink to={item.href} key={index}>
                            {/* <div className={'tab ' + (this.state.currentIndex == index ? 'red' : '')} key={index} onClick={() => { this.handleClick(index) }}> */}
                                <i className={'iconfont ' + item.icon}></i>
                                <div>{item.text}</div>
                            {/* </div> */}
                            </NavLink>
                        )
                    })
                }
            </div>
        );
    }
}


export default Tabbar;